export interface WatermarkDataState {
    /** 水印文字 */
    text: string
    /** 文字颜色 */
    color?: string
    /** 文字倾斜度 */
    rotate?: number
    font?: string
}
export function addWatermarkToImage(file: File, watermarkData: WatermarkDataState): Promise<string> {
    return new Promise((resolve, reject) => {
        // 创建一个 FileReader 对象
        const reader = new FileReader();
        // 读取文件
        reader.readAsDataURL(file);
        // 当文件加载完成时执行的回调函数
        reader.onload = function (event) {
            // 获取加载的图片数据
            const imgData = event.target?.result as string;
            // 创建一个 Image 对象
            const img = new Image();
            img.src = imgData;
            img.setAttribute("crossOrigin", 'Anonymous')
            img.onload = () => {
                // 创建一个 Canvas 元素
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                if (!ctx) {
                    reject('创建Canvas失败')
                    console.error('Canvas is not supported in this browser');
                    return;
                }
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                // 获取水印文本
                const watermarkText = watermarkData.text;
                // 画个小水印
                const water = document.createElement('canvas');
                // 小水印画布大小
                water.width = 200;
                water.height = 200;
                const waterCtx = water.getContext('2d') as CanvasRenderingContext2D;
                waterCtx?.clearRect(0, 0, water.width, water.height);
                // 小水印中文字偏转角度
                waterCtx.rotate(watermarkData.rotate ?? (-20 * Math.PI) / 180);
                waterCtx.font = watermarkData.font ?? '32px Microsoft Yahei';
                waterCtx.fillStyle = watermarkData.color ?? 'rgba(200, 200, 200, 0.1)';
                /** 文字添加 */
                waterCtx.fillText(watermarkText, 10, 55);
                // 铺上去
                const pat = ctx.createPattern(water, 'repeat');
                ctx.fillStyle = pat as any;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                // 将 Canvas 转换为 Data URL
                // 添加文字水印
                ctx.fillStyle = watermarkData.color ?? 'rgba(200, 200, 200, 0.1)';
                ctx.textBaseline = 'middle';
                ctx.font = 50 + 'px Arial';
                ctx.fillText(watermarkText, 16, canvas.height - 16);
                // 将 Data URL 发送到服务器端并上传到 OSS
                const dataURL = canvas.toDataURL();
                resolve(dataURL)
            }
        }
    })


}
// 将水印信息隐藏在图像的低位数据中
function addInvisibleWatermark(imageData: { data: any }, watermark: any) {
    const data = imageData.data;
    const watermarkBinary = textToBinary(watermark);
    const watermarkLength = watermarkBinary.length;

    // 将水印信息嵌入到图像数据的低位中
    for (let i = 0; i < watermarkLength; i++) {
        const bit = watermarkBinary[i] as any;
        data[i * 4] = (data[i * 4] & 0xFE) | bit; // 将低位设置为水印信息
    }

    return imageData;
}
// 将文本转换为二进制字符串
function textToBinary(text: string) {
    return text.split('').map((char: any) => char.charCodeAt(0).toString(2).padStart(8, '0')).join('');
}
// 将二进制字符串转换为文本
function binaryToText(binary: string) {
    const chunks = binary.match(/.{1,8}/g);
    return chunks?.map((chunk: string) => String.fromCharCode(parseInt(chunk, 2))).join('');
}